<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交平台多级级多级顶部多级导航</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #4F46E5;
      --secondary: #10B981;
      --danger: #EF4444;
      --light: #F9FAFB;
      --dark: #1F2937;
      --border-light: #E5E7EB;
      --border-dark: #374151;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--light);
      color: var(--dark);
      height: 100vh;
      overflow-x: hidden;
      margin: 0;
    }
    
    /* 页面容器 */
    .page-container {
      display: none;
      height: 100%;
    }
    
    .page-container.active {
      display: block;
    }
    
    /* 页面内容区 */
    .page-content {
      padding: 20px;
      min-height: calc(100vh - 112px);
      padding-top: 112px;
    }
    
    .page-title {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 20px;
    }
    
    .scenario-info {
      background-color: rgba(79, 70, 229, 0.1);
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 20px;
      border-left: 4px solid var(--primary);
    }
    
    /* 一级导航基础样式 */
    .level-1 {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 56px;
      display: flex;
      align-items: center;
      background-color: white;
      border-bottom: 1px solid var(--border-light);
      z-index: 1000;
      padding: 0 16px;
    }
    
    .level-1 .logo {
      font-size: 20px;
      font-weight: 700;
      color: var(--primary);
      text-decoration: none;
    }
    
    .level-1 .title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
    }
    
    .level-1 .actions {
      display: flex;
      gap: 12px;
    }
    
    .level-1 .action-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: #6B7280;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      position: relative;
    }
    
    .level-1 .action-btn:hover {
      background-color: #F3F4F6;
    }
    
    .badge {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: var(--danger);
      color: white;
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* 二级导航基础样式 */
    .level-2 {
      position: fixed;
      top: 56px;
      left: 0;
      right: 0;
      height: 56px;
      background-color: white;
      border-bottom: 1px solid var(--border-light);
      z-index: 999;
    }
    
    /* 场景1: 首页信息流导航 */
    .scenario-feed .level-1 {
      justify-content: space-between;
    }
    
    .scenario-feed .level-2 {
      display: flex;
      overflow-x: auto;
      scrollbar-width: none;
      padding: 0 8px;
    }
    
    .scenario-feed .level-2::-webkit-scrollbar {
      display: none;
    }
    
    .scenario-feed .level-2-item {
      padding: 0 16px;
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 15px;
      font-weight: 500;
      color: #6B7280;
      white-space: nowrap;
      border-bottom: 3px solid transparent;
      cursor: pointer;
    }
    
    .scenario-feed .level-2-item.active {
      color: var(--primary);
      border-bottom-color: var(--primary);
    }
    
    /* 场景2: 内容详情页导航 */
    .scenario-detail .level-1 {
      justify-content: space-between;
    }
    
    .scenario-detail .level-1 .back-btn {
      background: transparent;
      border: none;
      font-size: 20px;
      color: #1F2937;
      padding: 4px 8px;
    }
    
    .scenario-detail .level-2 {
      display: flex;
    }
    
    .scenario-detail .level-2-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 500;
      color: #6B7280;
      cursor: pointer;
      position: relative;
    }
    
    .scenario-detail .level-2-item.active {
      color: var(--primary);
    }
    
    .scenario-detail .level-2-item.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      width: 30px;
      height: 3px;
      border-radius: 3px;
      background-color: var(--primary);
    }
    
    /* 场景3: 个人中心导航 */
    .scenario-profile .level-1 {
      justify-content: space-between;
    }
    
    .scenario-profile .level-1 .back-btn {
      background: transparent;
      border: none;
      font-size: 20px;
      color: #1F2937;
      padding: 4px 8px;
    }
    
    .scenario-profile .level-2 {
      padding: 8px 16px;
    }
    
    .scenario-profile .segmented {
      display: flex;
      border-radius: 8px;
      border: 1px solid var(--border-light);
      overflow: hidden;
    }
    
    .scenario-profile .level-2-item {
      flex: 1;
      padding: 8px 0;
      background: transparent;
      border: none;
      font-size: 15px;
      font-weight: 500;
      color: #6B7280;
    }
    
    .scenario-profile .level-2-item.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 场景4: 消息中心导航 */
    .scenario-messages .level-1 {
      justify-content: space-between;
    }
    
    .scenario-messages .level-1 .back-btn {
      background: transparent;
      border: none;
      font-size: 20px;
      color: #1F2937;
      padding: 4px 8px;
    }
    
    .scenario-messages .level-2 {
      padding: 0 16px;
    }
    
    .scenario-messages .dropdown-toggle {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: transparent;
      border: none;
      font-size: 16px;
      font-weight: 500;
      color: #1F2937;
    }
    
    .scenario-messages .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color: white;
      border: none;
      border-bottom: 1px solid var(--border-light);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      padding: 0;
      margin: 0;
      border-radius: 0;
      display: none;
    }
    
    .scenario-messages .dropdown-menu.show {
      display: block;
      animation: slideDown 0.2s ease;
    }
    
    .scenario-messages .level-2-item {
      display: block;
      width: 100%;
      padding: 12px 16px;
      text-align: left;
      background: transparent;
      border: none;
      font-size: 15px;
      color: #1F2937;
      border-bottom: 1px solid var(--border-light);
    }
    
    .scenario-messages .level-2-item:last-child {
      border-bottom: none;
    }
    
    .scenario-messages .level-2-item.active {
      color: var(--primary);
      background-color: rgba(79, 70, 229, 0.1);
    }
    
    /* 场景5: 探索页面导航 */
    .scenario-explore .level-1 {
      justify-content: space-between;
    }
    
    .scenario-explore .level-1 .back-btn {
      background: transparent;
      border: none;
      font-size: 20px;
      color: #1F2937;
      padding: 4px 8px;
    }
    
    .scenario-explore .level-2 {
      display: flex;
    }
    
    .scenario-explore .level-2-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #6B7280;
      font-size: 11px;
      padding-top: 6px;
      cursor: pointer;
    }
    
    .scenario-explore .level-2-item.active {
      color: var(--primary);
    }
    
    .scenario-explore .level-2-icon {
      font-size: 20px;
      margin-bottom: 4px;
    }
    
    /* 深色模式 */
    .dark-mode {
      background-color: var(--dark);
      color: white;
    }
    
    .dark-mode .level-1,
    .dark-mode .level-2 {
      background-color: #111827;
      border-bottom-color: var(--border-dark);
    }
    
    .dark-mode .level-1 .title,
    .dark-mode .level-1 .back-btn,
    .dark-mode .scenario-messages .dropdown-toggle {
      color: white;
    }
    
    .dark-mode .level-1 .action-btn,
    .dark-mode .level-2-item,
    .dark-mode .scenario-profile .level-2-item {
      color: #9CA3AF;
    }
    
    .dark-mode .scenario-messages .dropdown-menu {
      background-color: #111827;
      border-bottom-color: var(--border-dark);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }
    
    .dark-mode .scenario-messages .level-2-item {
      color: white;
      border-bottom-color: var(--border-dark);
    }
    
    .dark-mode .scenario-info {
      background-color: rgba(79, 70, 229, 0.2);
      color: white;
    }
    
    /* 场景切换器 */
    .scenario-switcher {
      position: fixed;
      top: 120px;
      right: 16px;
      z-index: 1001;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      width: 160px;
    }
    
    .dark-mode .scenario-switcher {
      background-color: #1F2937;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    .switcher-header {
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 500;
      border-bottom: 1px solid var(--border-light);
    }
    
    .dark-mode .switcher-header {
      border-bottom-color: var(--border-dark);
      color: white;
    }
    
    .switcher-option {
      padding: 10px 16px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .switcher-option:hover {
      background-color: #F3F4F6;
    }
    
    .dark-mode .switcher-option {
      color: white;
    }
    
    .dark-mode .switcher-option:hover {
      background-color: #374151;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 动画 */
    @keyframes slideDown {
      from { transform: translateY(-10px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
  </style>
</head>
<body>
  <!-- 场景切换器 -->
  <div class="scenario-switcher">
    <div class="switcher-header">导航场景</div>
    <div class="switcher-option active" data-scenario="feed">首页信息流</div>
    <div class="switcher-option" data-scenario="detail">内容详情页</div>
    <div class="switcher-option" data-scenario="profile">个人中心</div>
    <div class="switcher-option" data-scenario="messages">消息中心</div>
    <div class="switcher-option" data-scenario="explore">探索页面</div>
    <div class="switcher-option" data-scenario="dark">深色模式</div>
  </div>
  
  <!-- 1. 首页信息流导航场景 -->
  <div class="page-container active scenario-feed" id="feedPage">
    <!-- 一级导航 -->
    <nav class="level-1">
      <a href="#" class="logo">Social</a>
      <div class="actions">
        <button class="action-btn" aria-label="搜索">
          <i class="fa fa-search"></i>
        </button>
        <button class="action-btn" aria-label="消息">
          <i class="fa fa-bell"></i>
          <span class="badge">5</span>
        </button>
      </div>
    </nav>
    
    <!-- 二级导航 -->
    <nav class="level-2">
      <div class="level-2-item active" data-tab="following">关注</div>
      <div class="level-2-item" data-tab="recommend">推荐</div>
      <div class="level-2-item" data-tab="trending">热门</div>
      <div class="level-2-item" data-tab="latest">最新</div>
      <div class="level-2-item" data-tab="nearby">附近</div>
      <div class="level-2-item" data-tab="topics">话题</div>
    </nav>
    
    <div class="page-content">
      <h1 class="page-title">关注的内容</h1>
      <div class="scenario-info">
        <strong>导航特点：</strong> 一级导航展示品牌标识和核心功能入口，二级导航采用可横向滑动的标签形式，适合分类较多的内容浏览场景，支持左右滑动查看更多分类。
      </div>
      <p>这里展示您关注的用户发布的最新动态和内容</p>
    </div>
  </div>
  
  <!-- 2. 内容详情页导航场景 -->
  <div class="page-container scenario-detail" id="detailPage">
    <!-- 一级导航 -->
    <nav class="level-1">
      <button class="back-btn" aria-label="返回">
        <i class="fa fa-arrow-left"></i>
      </button>
      <h1 class="title">帖子详情</h1>
      <div class="actions">
        <button class="action-btn" aria-label="分享">
          <i class="fa fa-share-alt"></i>
        </button>
        <button class="action-btn" aria-label="更多">
          <i class="fa fa-ellipsis-v"></i>
        </button>
      </div>
    </nav>
    
    <!-- 二级导航 -->
    <nav class="level-2">
      <div class="level-2-item active" data-tab="comments">评论 (24)</div>
      <div class="level-2-item" data-tab="related">相关推荐</div>
      <div class="level-2-item" data-tab="author">作者主页</div>
    </nav>
    
    <div class="page-content">
      <h1 class="page-title">评论区</h1>
      <div class="scenario-info">
        <strong>导航特点：</strong> 一级导航包含返回按钮、页面标题和操作按钮，二级导航采用均分标签形式，适合内容详情页的相关内容切换，选中状态有明确指示。
      </div>
      <p>这里展示该帖子的所有评论和互动内容</p>
    </div>
  </div>
  
  <!-- 3. 个人中心导航场景 -->
  <div class="page-container scenario-profile" id="profilePage">
    <!-- 一级导航 -->
    <nav class="level-1">
      <button class="back-btn" aria-label="返回">
        <i class="fa fa-arrow-left"></i>
      </button>
      <h1 class="title">我的主页</h1>
      <div class="actions">
        <button class="action-btn" aria-label="设置">
          <i class="fa fa-cog"></i>
        </button>
      </div>
    </nav>
    
    <!-- 二级导航 -->
    <nav class="level-2">
      <div class="segmented">
        <button class="level-2-item active" data-tab="posts">帖子</button>
        <button class="level-2-item" data-tab="likes">点赞</button>
        <button class="level-2-item" data-tab="collections">收藏</button>
        <button class="level-2-item" data-tab="following">关注</button>
      </div>
    </nav>
    
    <div class="page-content">
      <h1 class="page-title">我的帖子</h1>
      <div class="scenario-info">
        <strong>导航特点：</strong> 一级导航提供返回和设置功能，二级导航采用分段按钮形式，适合个人中心内不同内容类型的切换，选中项有明显的背景色区分。
      </div>
      <p>这里展示您发布过的所有帖子内容</p>
    </div>
  </div>
  
  <!-- 4. 消息中心导航场景 -->
  <div class="page-container scenario-messages" id="messagesPage">
    <!-- 一级导航 -->
    <nav class="level-1">
      <button class="back-btn" aria-label="返回">
        <i class="fa fa-arrow-left"></i>
      </button>
      <h1 class="title">消息中心</h1>
      <div class="actions">
        <button class="action-btn" aria-label="新建">
          <i class="fa fa-plus"></i>
        </button>
      </div>
    </nav>
    
    <!-- 二级导航 -->
    <nav class="level-2">
      <button class="dropdown-toggle" id="msgDropdown">
        <span id="currentMsgType">全部消息</span>
        <i class="fa fa-chevron-down"></i>
      </button>
      <div class="dropdown-menu" id="msgMenu">
        <button class="level-2-item active" data-tab="all">全部消息</button>
        <button class="level-2-item" data-tab="mentions">@我的</button>
        <button class="level-2-item" data-tab="comments">评论</button>
        <button class="level-2-item" data-tab="likes">点赞</button>
        <button class="level-2-item" data-tab="follows">关注</button>
      </div>
    </nav>
    
    <div class="page-content">
      <h1 class="page-title">全部消息</h1>
      <div class="scenario-info">
        <strong>导航特点：</strong> 一级导航提供返回和新建功能，二级导航采用下拉菜单形式，节省屏幕空间，适合消息分类等选项较多的场景，点击有平滑展开动画。
      </div>
      <p>这里展示您收到的所有类型消息通知</p>
    </div>
  </div>
  
  <!-- 5. 探索页面导航场景 -->
  <div class="page-container scenario-explore" id="explorePage">
    <!-- 一级导航 -->
    <nav class="level-1">
      <button class="back-btn" aria-label="返回">
        <i class="fa fa-arrow-left"></i>
      </button>
      <h1 class="title">探索</h1>
      <div class="actions">
        <button class="action-btn" aria-label="搜索">
          <i class="fa fa-search"></i>
        </button>
      </div>
    </nav>
    
    <!-- 二级导航 -->
    <nav class="level-2">
      <div class="level-2-item active" data-tab="discover">
        <i class="fa fa-compass level-2-icon"></i>
        <span>发现</span>
      </div>
      <div class="level-2-item" data-tab="events">
        <i class="fa fa-calendar level-2-icon"></i>
        <span>活动</span>
      </div>
      <div class="level-2-item" data-tab="trends">
        <i class="fa fa-line-chart level-2-icon"></i>
        <span>趋势</span>
      </div>
      <div class="level-2-item" data-tab="people">
        <i class="fa fa-users level-2-icon"></i>
        <span>达人</span>
      </div>
    </nav>
    
    <div class="page-content">
      <h1 class="page-title">发现</h1>
      <div class="scenario-info">
        <strong>导航特点：</strong> 一级导航提供返回和搜索功能，二级导航采用图标+文字组合形式，视觉识别性强，适合功能入口类页面，每个选项平均分配宽度。
      </div>
      <p>这里展示为您推荐的热门内容和新兴趋势</p>
    </div>
  </div>
  
  <!-- 6. 深色模式导航场景 -->
  <div class="page-container scenario-feed dark-mode" id="darkPage">
    <!-- 一级导航 -->
    <nav class="level-1">
      <a href="#" class="logo">Social</a>
      <div class="actions">
        <button class="action-btn" aria-label="搜索">
          <i class="fa fa-search"></i>
        </button>
        <button class="action-btn" aria-label="消息">
          <i class="fa fa-bell"></i>
          <span class="badge">5</span>
        </button>
      </div>
    </nav>
    
    <!-- 二级导航 -->
    <nav class="level-2">
      <div class="level-2-item active" data-tab="following">关注</div>
      <div class="level-2-item" data-tab="recommend">推荐</div>
      <div class="level-2-item" data-tab="trending">热门</div>
      <div class="level-2-item" data-tab="latest">最新</div>
      <div class="level-2-item" data-tab="nearby">附近</div>
      <div class="level-2-item" data-tab="topics">话题</div>
    </nav>
    
    <div class="page-content">
      <h1 class="page-title">关注的内容</h1>
      <div class="scenario-info">
        <strong>导航特点：</strong> 深色模式下的多级导航，采用深色背景配合高对比度元素，降低夜间使用的视觉疲劳，保持与浅色模式一致的功能和交互体验。
      </div>
      <p>这里展示您关注的用户发布的最新动态和内容</p>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const pageContainers = document.querySelectorAll('.page-container');
    const msgDropdown = document.getElementById('msgDropdown');
    const msgMenu = document.getElementById('msgMenu');
    const currentMsgType = document.getElementById('currentMsgType');
    
    // 当前激活的场景
    let activeScenario = 'feed';
    
    // 切换导航场景
    switcherOptions.forEach(option => {
      option.addEventListener('click', function() {
        // 更新选项状态
        switcherOptions.forEach(opt => opt.classList.remove('active'));
        this.classList.add('active');
        
        // 获取选中场景
        activeScenario = this.getAttribute('data-scenario');
        
        // 隐藏所有页面
        pageContainers.forEach(page => page.classList.remove('active'));
        
        // 显示选中场景页面
        const targetPage = document.getElementById(`${activeScenario}Page`);
        if (targetPage) {
          targetPage.classList.add('active');
          
          // 重置二级导航选中状态
          const level2Items = targetPage.querySelectorAll('.level-2-item');
          if (level2Items.length > 0) {
            level2Items.forEach(item => item.classList.remove('active'));
            level2Items[0].classList.add('active');
            
            // 更新页面标题
            updatePageTitle(targetPage, level2Items[0]);
          }
          
          // 特殊处理下拉菜单
          if (activeScenario === 'messages' && currentMsgType) {
            currentMsgType.textContent = '全部消息';
          }
        }
      });
    });
    
    // 二级导航项点击事件
    document.addEventListener('click', function(e) {
      const level2Item = e.target.closest('.level-2-item');
      if (level2Item) {
        e.preventDefault();
        
        // 获取当前活跃页面
        const activePage = document.querySelector('.page-container.active');
        if (!activePage) return;
        
        // 更新二级导航选中状态
        const level2Items = activePage.querySelectorAll('.level-2-item');
        level2Items.forEach(item => item.classList.remove('active'));
        level2Item.classList.add('active');
        
        // 处理下拉菜单
        if (activePage.classList.contains('scenario-messages')) {
          msgMenu.classList.remove('show');
          if (currentMsgType) {
            currentMsgType.textContent = level2Item.textContent;
          }
        }
        
        // 更新页面标题
        updatePageTitle(activePage, level2Item);
      }
    });
    
    // 消息下拉菜单切换
    if (msgDropdown && msgMenu) {
      msgDropdown.addEventListener('click', function(e) {
        e.stopPropagation();
        msgMenu.classList.toggle('show');
      });
    }
    
    // 点击其他区域关闭下拉菜单
    document.addEventListener('click', function() {
      if (msgMenu && msgMenu.classList.contains('show')) {
        msgMenu.classList.remove('show');
      }
    });
    
    // 导航按钮点击事件
    document.querySelectorAll('.action-btn, .back-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        let actionName = '';
        const icon = this.querySelector('i');
        
        if (this.classList.contains('back-btn')) {
          actionName = '返回';
        } else if (icon) {
          if (icon.classList.contains('fa-search')) actionName = '搜索';
          else if (icon.classList.contains('fa-bell')) actionName = '查看通知';
          else if (icon.classList.contains('fa-share-alt')) actionName = '分享内容';
          else if (icon.classList.contains('fa-ellipsis-v')) actionName = '更多选项';
          else if (icon.classList.contains('fa-cog')) actionName = '设置';
          else if (icon.classList.contains('fa-plus')) actionName = '新建消息';
        }
        
        alert(`执行${actionName}操作`);
      });
    });
    
    // 更新页面标题
    function updatePageTitle(pageContainer, level2Item) {
      const pageTitle = pageContainer.querySelector('.page-title');
      if (!pageTitle) return;
      
      // 根据场景和选项更新标题
      if (pageContainer.classList.contains('scenario-feed')) {
        pageTitle.textContent = `${level2Item.textContent}的内容`;
      } else if (pageContainer.classList.contains('scenario-detail')) {
        pageTitle.textContent = level2Item.textContent.includes('评论') ? '评论区' : 
                               level2Item.textContent.includes('相关') ? '相关推荐' : '作者主页';
      } else if (pageContainer.classList.contains('scenario-profile')) {
        pageTitle.textContent = `我的${level2Item.textContent}`;
      } else if (pageContainer.classList.contains('scenario-messages')) {
        pageTitle.textContent = level2Item.textContent;
      } else if (pageContainer.classList.contains('scenario-explore')) {
        pageTitle.textContent = level2Item.querySelector('span').textContent;
      }
    }
  </script>
</body>
</html>
